<template>
  <div>
    <div class="top">
      <div class="button">
        <span
          class="iconfont icon-zuoyoujiantou"
          @click="$router.push('/recommend')"
        ></span>
        <input
          type="text"
          placeholder="搜索歌曲、歌手"
          v-model="searchText"
          @keyup.enter="getSearchText"
        />
        <span class="iconfont icon-cancel-1-copy" v-show="type" @click="del"></span>
      </div>
    </div>

    <div>
      <!-- 热门搜索 -->
      <div class="center" v-show="!type">
        <h5>热门搜索</h5>
        <ul>
          <li v-for="(item,index) in hotlist[0]" :key="index" @click="add">{{item.first}}</li>
        </ul>
      </div>
      <!-- 搜索历史 -->
      <div class="bottom-box" v-show="!type">
        <div class="toptext">
          <h5>搜索历史</h5>
          <span class="iconfont icon-lajitong"></span>
        </div>
        <ul>
          <li v-for="(item,index) in dellist" :key="index">
            <span>{{item.name}}</span>
            <span class="iconfont icon-cancel-1-copy" ></span>
          </li>
        </ul>
      </div>
    </div>

    <div class="buttom">
      <ul class="list" v-show="type">
        <li v-for="(item, index) in list" :key="index" @click="setId(item.id)">
          <span>{{ item.name }}</span>
          <p>{{ item.artists[0].name }}</p>
        </li>
      </ul>
    </div>   
    <!-- 底部组件 -->
    <bottom-nav></bottom-nav>
  </div>
</template>

<script>
// getSongDetail
import { getSearch,getSearchHot } from "../api/search";
import bottomNav from "../components/base/bottomNav.vue";
export default {
  data() {
    return {
      searchText: "",
      list: [],
      SongDetail: null, //歌曲信息
      type: false,
      hotlist:[],//热门搜索
      dellist:[],//搜索历史
      musicData:"",
    };
  },
  methods: {
    getSearchText() {
      getSearch({ keywords: this.searchText }).then((data) => {
        console.log(data.result);
        this.list = data.result.songs;
        this.dellist.push({id:this.id,name:this.searchText});
        console.log(data.result.songs);
        this.searchText = "";
        this.type = !false
      });
    },
    del(){
        this.type = false;
    },
    add(event){
      console.log(111)
      this.searchText = event.target.innerText
    },

    setId(id){
            // this.$emit("get-play-all-id",this.$route.query.id);//传递歌单id
            this.$emit("get-player-id",id)
        }
  },
  created(){
      getSearchHot().then((data)=>{
          console.log(data)
          this.hotlist.push(data.result.hots)
      })
  },
  components: {
    bottomNav,
  },

  watch:{
     searchText(){
       if(this.searchText.length != 0){
         this.getSearchText();
       }
     }
  }

};
</script>

<style lang="less">
// *{
//     margin: 0px;
//     padding: 0px;
// }
.top {
  position: relative;
  height: 36px;
  background-color: #d44538;
  .button {
    font-size: 18px;
    position: absolute;
    left: 12px;
    top: 7px;
    color: #fff;
  }
  input {
    width: 300px;
    height: 22px;
    border: none;
    background-color: #d44538;
    border-bottom: 2px solid #de8780;
    margin-left: 10px;
  }
  input::-webkit-input-placeholder {
    font-size: 17px;
    color: #de8780;
  }
}
.buttom {
  // margin-top: 40px;
  // height: 150px;
  background-color: #f2f3f5;
  span {
    display: inline-block;
    font-size: 12px;
    color: #e3918d;
    margin-top: 10px;
    margin-left: 17px;
  }
  
  .list {
    position: relative;
    list-style: none;
    // background-color: pink;
    li {
      height: 50px;
      border-bottom: 2px solid #e5e6e8;
      span {
        font-size: 15px;
        margin-top: 10px;
        margin-left: 17px;
        color: black;
      }
      p {
        font-size: 11px;
        margin-left: 17px;
        color: #939696;
      }
    }
  }
}
.center {
  // width: 100%;
  padding: 20px 20px;
  padding-bottom: 0px;
  box-sizing: border-box;
  h5 {
    color: #a0a1a2;
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      border: 1px solid #f2f3f4;
      margin: 10px 5px 5px 0;
      padding: 0px 8px;
      box-sizing: border-box;
      font-size: 14px;
      text-align: center;
      border-radius: 8px;
      line-height: 30px;
    }
  }
}
.bottom-box {
  padding: 20px 20px;
  padding-bottom: 0px;
  box-sizing: border-box;
  ul {
    width: 100%;
    li {
      width: 100%;
      font-size: 14px;
      color: black;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
    }
  }
}
.toptext{
        display: flex;
        justify-content: space-between;
}
</style>